<!-- ZmCell -->
<template>
  <view class="zm-cell" :class="extClass">
    <u-cell-group
      :border="cellGroupBorder"
      :custom-style="cellGroupCustomStyle"
    >
      <u-cell
        :title="title"
        :icon="icon"
        :value="value"
        :label="label"
        :size="size"
        :center="center"
        :border="border"
        :disabled="disabled"
        :is-link="isLink"
        :arrow="arrow"
        :url="url"
        :title-style="titleStyle"
        :icon-style="iconStyle"
        @click="handelTap"
      >
        <template slot="title">
          <slot name="title" v-if="$slots.title"> </slot>
        </template>
        <template slot="label">
          <slot name="label" v-if="$slots.label"> </slot>
        </template>
        <template slot="value">
          <slot name="value" v-if="$slots.value"> </slot>
        </template>
      </u-cell>
    </u-cell-group>
  </view>
</template>

<script>
  export default {
    name: 'yy-cell',
    props: {
      extClass: {
        type: String,
        default: ''
      },
      title: {
        type: String,
        default: ''
      },
      icon: {
        type: String,
        default: ''
      },
      rightIcon: {
        type: String,
        default: ''
      },
      value: {
        type: String,
        default: ''
      },
      label: {
        type: String,
        default: ''
      },
      size: {
        type: String,
        default: 'small'
      },
      url: {
        type: String,
        default: ''
      },
      center: {
        type: Boolean,
        default: false
      },
      border: {
        type: Boolean,
        default: false
      },
      cellGroupBorder: {
        type: Boolean,
        default: false
      },
      arrow: {
        type: Boolean,
        default: false
      },
      isLink: {
        type: Boolean,
        default: false
      },
      disabled: Boolean,
      cellGroupCustomStyle: {
        type: Object,
        defautl() {
          return {}
        }
      },
      titleStyle: {
        type: Object,
        defautl() {
          return {}
        }
      },
      iconStyle: {
        type: Object,
        defautl() {
          return {}
        }
      }
    },
    data() {
      return {}
    },
    computed: {},

    methods: {
      // 初始化方法
      init() {},
      handelTap() {
        this.$emit('myTap')
      }
    }
  }
</script>
<style lang="scss" scoped>
  .zm-cell {
    background: #fff;
    border-radius: 18rpx;
    color: #333333;
  }
</style>
